The Complex But Awesome CSS border

border-image is a shorthand property that lets you use an image or CSS gradient as the border of an element.

The border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image.

The border-image CSS property draws an image around a given element. It replaces the element's regular border. Border-image-outset · Border-image-slice · Border-image-repeat

Mark the ones that should have a border with a class: <img class='picture' ...> and then use CSS to add the border: .picture { border: 1px solid green; }

border-image-width 可以設定邊框的「影像寬度」，通常使用影像邊框時，預設都會將影像「填滿」邊框，但運用這個樣式就能設定影像的尺寸，進而產生「裁切」或「留白」的效果， ...

border-image-slice：邊框圖片分割，border-image-slice 會把圖片分成九公格，抓出圖片四角的圖片位置，分別為上、右、下、左，數字後面不可加單位。

In this article, Temani Afif demonstrates different approaches for using border-image to create clever decorative accents and shapes.

The border-image property allows you to specify an image to be used as the border around an element. The border-image property is a shorthand property ... Border-image-outset · Try it Yourself · Show demo

CSS border-image Property. The CSS border-image property allows you to specify an image to be used instead of the normal border around an element. CSS Multiple Backgrounds · The border-image Property · Try it Yourself